<!DOCTYPE html>
<html lang="en" class="beauty-scroll">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>终端管理平台</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=a653cbd656d0fdc7683a9000aefdf69b&plugin=AMap.Walking,AMap.Autocomplete,AMap.PlaceSearch,Map3D,AMap.DistrictSearch,AMap.CircleEditor,AMap.PolyEditor"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/animejs/3.2.0/anime.min.js"></script>

  </head>
  <style>
    .loading{
      position: fixed;
      bottom: 0;
      left: 0;
      top: 0;
      right: 0;
      background: #fff;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .load-6 .letter {
      animation-name: loadingF;
      animation-duration: 1.6s;
      animation-iteration-count: infinite;
      animation-direction: linear;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .letter-holder{
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
    @keyframes loadingF {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    .l-1 {
      animation-delay: 0.48s;
    }
    .l-2 {
      animation-delay: 0.6s;
    }
    .l-3 {
      animation-delay: 0.72s;
    }
    .l-4 {
      animation-delay: 0.84s;
    }
    .l-5 {
      animation-delay: 0.96s;
    }
    .l-6 {
      animation-delay: 1.08s;
    }
    .l-7 {
      animation-delay: 1.2s;
    }
    .l-8 {
      animation-delay: 1.32s;
    }
    .l-9 {
      animation-delay: 1.44s;
    }
    .l-10 {
      animation-delay: 1.56s;
    }
  </style>
  <body class="beauty-scroll">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div class="loading" id="loadLoading">
        <div class="load-6">
          <div class="letter-holder">
            <div class="l-1 letter">L</div>
            <div class="l-2 letter">o</div>
            <div class="l-3 letter">a</div>
            <div class="l-4 letter">d</div>
            <div class="l-5 letter">i</div>
            <div class="l-6 letter">n</div>
            <div class="l-7 letter">g</div>
            <div class="l-8 letter">.</div>
            <div class="l-9 letter">.</div>
            <div class="l-10 letter">.</div>
          </div>
        </div>
    </div>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script>
    window.onload = function(){
      anime({
          targets: '#loadLoading',
          opacity: [1, 0],
          zIndex: [99999, -9999],
          duration: 500,
          delay: 500,
        }) // 绝对偏移量
    }
  </script>
  </body>
</html>
